<template>
	<div class="banner">
		<el-carousel :interval="3000" arrow="always">
			<el-carousel-item  v-for="item,index in $t('public.banner')" :key="index">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
		</el-carousel>
	</div>
</template>  
  
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>  
<style>
.banner {
  height: 400px;
}
.el-carousel {
  width: 100%;
  height: 400px;
  overflow-x: hidden;
}
.el-carousel__container {
  height: 400px !important;
}
.el-carousel__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  transition: 0.4s ease-in-out;
  overflow: hidden;
  z-index: 0;
}
.el-carousel__arrow {
  width: 50px;
  height: 50px;
  font-size: 36px;
}
</style> 